<template>
  <div class="jjyx-line">
    <simple-chart :options="options" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
function getOptions() {
  const fontSize = 18


  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      top: '50',
      right: '100',
      left: '100',
      bottom: '50'
    },
    legend: {
      left: 'right',
      data: ['去年实际', '今年预估', '今年实际'],
      itemWidth: 20,
      itemHeight: 20,
      borderRadius: 0,
      textStyle: {
        color: '#FFF',
        fontSize: 18
      }
    },
    xAxis: [{
      type: 'category',
      data: ['第一季度', '第二季度', '第三季度', '第四季度'],
      axisLine: {
        lineStyle: {
          color: '#2B5577',
          width: 2
        }
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: fontSize,
          color: '#FFF',
          width: 2
        }
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [
      {
        axisLabel: {
          formatter: '{value}',
          fontSize: fontSize,
          color: '#fff'
        },
        alignTicks: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#2B5577',
            width: 2
          }
        }
      }
    ],
    series: [
      {
        name: '去年实际',
        type: 'bar',
        data: [4500, 4800, 3800, 2200],
        barWidth: '15%',
        itemStyle: {
          normal: {
            borderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(242,221,130,1)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(242,147,4,0.8)' // 100% 处的颜色
            }], false),
          }
        },
        label: {
          normal: {
            show: false,
            lineHeight: 30,
            formatter: '{c}',
            position: 'top',
            textStyle: {
              color: '#e72929',
              fontSize: 14
            }
          }
        }
      },
      {
        name: '今年预估',
        type: 'bar',
        data: [4100, 4300, 0, 0],
        barWidth: '15%',
        itemStyle: {
          normal: {
            borderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1,195,228,1)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(31,135,233,0.8)' // 100% 处的颜色
            }], false),
          }
        },
        label: {
          normal: {
            show: false,
            lineHeight: 30,
            formatter: '{c}',
            position: 'top',
            textStyle: {
              color: 'rgb(24,220,51)',
              fontSize: 14
            }
          }
        }
      },
      {
        name: '今年实际',
        type: 'bar',
        data: [3800, 4236, 2666, 0],
        barWidth: '15%',
        itemStyle: {
          normal: {
            borderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(45,249,205,1)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(24,106,103,0.8)' // 100% 处的颜色
            }], false),
          }
        },
        label: {
          normal: {
            show: false,
            lineHeight: 30,
            formatter: '{c}',
            position: 'top',
            textStyle: {
              color: 'rgb(24,220,51)',
              fontSize: 14
            }
          }
        }
      }
    ]
  }
}

export default {
  name: 'jjyx-line',
  components: {
  },
  data() {
    return {
      options: getOptions()
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.jjyx-line {
  height: 100%;
  position: relative;
}
</style>
